<%@ tag language="java" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://www.springframework.org/tags" prefix="s"%>
<%@ taglib uri="http://www.littcore.com/core" prefix="li" %>
<%@ attribute name="search" required="true" rtexprvalue="true" type="com.littcore.saap.core.module.quickview.model.search.Search" %>
<%@ attribute name="style" required="false" rtexprvalue="true" %>
<%@ attribute name="advFilterEnabled" required="false" rtexprvalue="true" %>
<%@ attribute name="alphaEnabled" required="false" rtexprvalue="true" %>
<!-- quickview-filter -->
<div class="quickview-filter ${empty param.qv_key?'hide':'' }">
   <form class="filter-form" name="filter-form" method="GET">
      <input type="hidden" id="pageIndex" name="pageIndex" value="${pageParam.pageIndex }" />
       <input type="hidden" id="pageSize" name="pageSize" value="${pageParam.pageSize }" />
        <input type="hidden" id="sortField" name="sortField" value="${pageParam.sortField}" /> 
        <input type="hidden" id="sortOrder" name="sortOrder" value="${pageParam.sortOrder}" />
        <select id="qv_key" name="qv_key" onchange="$.quickview.switchFilterField(this);">
          <c:forEach items="${search.paramGroupList }" var="paramGroup">
            <c:forEach items="${paramGroup.fieldList }" var="field">
              <option value="${field.key }" ${li:renderSelected(field.key, param['qv_key']) }><s:message code="${field.displayName }"></s:message></option>
            </c:forEach>
          </c:forEach>              
        </select>        
          <c:forEach items="${search.paramGroupList }" var="paramGroup" varStatus="varGroup">
            <c:forEach items="${paramGroup.fieldList }" var="field" varStatus="varField">
              <c:set var="__fieldHide" value="${(empty param['qv_key'] && (varGroup.index==0&&varField.index==0))?'show':'hide' }"></c:set>
              <c:if test="${field.key eq param['qv_key'] }"><c:set var="__fieldHide" value=""></c:set></c:if>
              
              <c:if test="${'text' eq field.input.type }">
                <input class="filter-field ${__fieldHide }" type="text" id="${field.key }" name="${field.key }" value="${li:out(param[field.key]) }" />
              </c:if>
              <c:if test="${'datepicker' eq field.input.type }">
                <div class="input-append date datepicker filter-field ${__fieldHide }" data-date-format="yyyy-mm-dd">
                  <input type="text" id="${field.key }" name="${field.key }" value="${param[field.key] }"/>
                  <span class="add-on"><i class="icon-calendar"></i></span>
                </div>
              </c:if>        
              <c:if test="${'select' eq field.input.type }">
                <select class="filter-field ${__fieldHide }" id="${field.key }" name="${field.key }">
                  <option value=""><s:message code='common.ui.select.all' /></option>
                  <c:forEach items="${field.items.itemList }" var="fieldItem">
                    <option value="${fieldItem.value }" ${fieldItem.value eq param[field.key]?"selected='selected'":""  }><c:out value="${fieldItem.name }"/></option>
                  </c:forEach>
                </select>
              </c:if>
              <c:if test="${'autocomplete' eq field.input.type }">
                <div class="input-append filter-field ${__fieldHide }">
                  <input type="text" id="${field.key }DisplayName" name="${field.key }DisplayName" autocomplete="off"   value='${param[field.displayKey] }' />
                  <span class="add-on"><i class="icon-search"></i></span>
                </div>
                <input type="hidden" id="${field.key }" name="${field.key }" value="${param[field.key] }" />
              </c:if>
              <!-- scripts -->
              <c:if test="${not empty field.input.scripts }">
                <script type="text/javascript">
                ${field.input.scripts}
                </script>
              </c:if>
            </c:forEach>
          </c:forEach> 
        &nbsp;&nbsp;&nbsp; 
        <button type="submit" class="btn btn-small">
            <i class="icon-search"></i>&nbsp;
            <s:message code='btn.query' />
        </button>&nbsp;&nbsp;&nbsp; 
        <a class="" href="javascript:;" onclick="$.quickview.cancel();"><s:message code='btn.cancel' /></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;        
        <c:if test="${advFilterEnabled }">
          <a class="" href="javascript:;" onclick="$.quickview.switchAdvFilter();"><s:message code='btn.advancedQuery' /></a>   
        </c:if>   
     </form>
     <c:if test="${advFilterEnabled }">
       <form class="adv-filter-form hide" name="adv-filter-form" method="GET">
        <input type="hidden" id="pageIndex" name="pageIndex" value="${pageParam.pageIndex }" />
         <input type="hidden" id="pageSize" name="pageSize" value="${pageParam.pageSize }" />
          <input type="hidden" id="sortField" name="sortField" value="${pageParam.sortField}" /> 
          <input type="hidden" id="sortOrder" name="sortOrder" value="${pageParam.sortOrder}" />
       </form>  
     </c:if> 
     <c:if test="${alphaEnabled }">
       <table class="letter-filter">
        <tr>
          <td><a href="javascript:;" onclick="$.quickview.jumpLetter('A');">A</a></td>
          <td><a href="javascript:;" onclick="$.quickview.jumpLetter('B');">B</a></td>
          <td><a href="javascript:;" onclick="$.quickview.jumpLetter('C');">C</a></td>
          <td><a href="javascript:;" onclick="$.quickview.jumpLetter('D');">D</a></td>
          <td><a href="javascript:;" onclick="$.quickview.jumpLetter('E');">E</a></td>
          <td><a href="javascript:;" onclick="$.quickview.jumpLetter('F');">F</a></td>
          <td><a href="javascript:;" onclick="$.quickview.jumpLetter('G');">G</a></td>
          <td><a href="javascript:;" onclick="$.quickview.jumpLetter('H');">H</a></td>
          <td><a href="javascript:;" onclick="$.quickview.jumpLetter('I');">I</a></td>
          <td><a href="javascript:;" onclick="$.quickview.jumpLetter('J');">J</a></td>
          <td><a href="javascript:;" onclick="$.quickview.jumpLetter('K');">K</a></td>
          <td><a href="javascript:;" onclick="$.quickview.jumpLetter('L');">L</a></td>
          <td><a href="javascript:;" onclick="$.quickview.jumpLetter('M');">M</a></td>
          <td><a href="javascript:;" onclick="$.quickview.jumpLetter('N');">N</a></td>
          <td><a href="javascript:;" onclick="$.quickview.jumpLetter('O');">O</a></td>
          <td><a href="javascript:;" onclick="$.quickview.jumpLetter('P');">P</a></td>
          <td><a href="javascript:;" onclick="$.quickview.jumpLetter('Q');">Q</a></td>
          <td><a href="javascript:;" onclick="$.quickview.jumpLetter('R');">R</a></td>
          <td><a href="javascript:;" onclick="$.quickview.jumpLetter('S');">S</a></td>
          <td><a href="javascript:;" onclick="$.quickview.jumpLetter('T');">T</a></td>
          <td><a href="javascript:;" onclick="$.quickview.jumpLetter('U');">U</a></td>
          <td><a href="javascript:;" onclick="$.quickview.jumpLetter('V');">V</a></td>
          <td><a href="javascript:;" onclick="$.quickview.jumpLetter('W');">W</a></td>
          <td><a href="javascript:;" onclick="$.quickview.jumpLetter('X');">X</a></td>
          <td><a href="javascript:;" onclick="$.quickview.jumpLetter('Y');">Y</a></td>
          <td><a href="javascript:;" onclick="$.quickview.jumpLetter('Z');">Z</a></td>
        </tr>
      </table>
    </c:if>
</div>
<script type="text/javascript">
<!--
$(document).ready(function(){	
  $('.datepicker').datepicker({
	  todayBtn: true,
	  todayHighlight: true
  });
  
  var key = $("#qv_key").val();
  //根据key显示对应的表单项
  $("#"+key).show();
});
//-->
</script>
